.projects {
	margin-left: -4px;
}
.projects .p {
    display: block;
    float: left;
    margin: 5px 8px;
}
.projects.portfolio{
	margin: 0 0 25px; 
}
.projects.portfolio .p {
	margin: 5px;
}
.projects {
    display: inline-block;
}
.projects.front {
	height: 155px;
}
.projects.front .p:first-child {
    margin-left: 0;
}
.projects.front .p:last-child {
    margin-right: 0;
    margin-left: 3px;
}
.projects.front .p {
	width: 216px;
}
.projects .p a {
    display: inline-block;
    height: 16px;
    padding: 0;
    width: 100%;
}
.projects .p .rim {
    border: 1px solid #D9D9D9;
    display: block;
    padding: 3px;
    box-shadow: 0px 1px 3px #aaa;
}
.projects.front .p:hover .rim {
    margin-top: -12px;
}
.projects .p h2 {
    color: #348edb;
    font-size: 11px;
    font-weight: bold;
    line-height: 16px;
    text-align: center;
}
.projects.front .p h2 {
	opacity: 0;
}
.projects.front .p:hover h2 {
    opacity: 1;
}
.projects .p a.lightbox {
    display: block;
    height: 135px;
    overflow: hidden;
    text-align: center;
    width: 208px;
}
.projects .p a.lightbox img{
	border: none;
	box-shadow: none;
	margin: 0;
}
.projects .p .hover {
    background: url("../img/hover.png") no-repeat scroll 50% 50% transparent;
	background-size: auto 40px;
    height: 48px;
    margin: 45px 0 0 75px;
    position: absolute;
    width: 48px;
	opacity: 0;
}
.projects .p:hover .hover {
	opacity: 1;
}

/* #Footer version 
================================================== */
.projects.footer .p {
	margin: 5px;
	width: 55px;
	display: inline-block;
}
.projects.footer .p .rim {
    border: 2px solid #fff;
    display: block;
    padding: 0px;
}
.projects.footer .p a.lightbox {
    display: block;
    height: 40px;
    overflow: hidden;
    text-align: center;
    width: 50px;
}
.projects.footer .p .hover {
    margin: -4px 0 0 2px;
}

.main .sidebar .projects {
	display: block;
    width: 230px;
    margin: 0 auto;
}

/* #Portfolio page - Mobile version
================================================== */
@media 
	all and (max-width: 767px)
{
	.projects {
		margin: 0 auto;
		width: 100%;
		display: inline-block;
	}
	.projects.portfolio .p {
	    display: block;
	    float: none;
	    margin: 5px auto 20px !important;
	    width: 216px;
	}
	.projects .p {
	    display: block;
	    float: none;
	    margin: 5px auto 20px !important;
	}
	
}

/* #Mobile
================================================== */
@media 
	all and (max-width: 767px)
{
	.projects .p:first-child {
	    margin-left: auto !important;
	}
	.projects .p:last-child {
	    margin-right: auto !important;
	    margin-left: auto !important;
	}
}
/* #Tablet protrait
================================================== */
@media 
	all and (min-width: 768px) and (max-width: 959px)
{
	.projects.front .p:first-child {
	    margin-left: 25px !important;
	}
	
	.projects.front .p:last-child {
	    display: none;
	}
}